簡言

既然可以使用第一種方式對「行物件(inline) 」達成垂直置中的話，當然沒有理由不能做到多行啊！但是你需要將多個物件或多行物件當成一個「行」物件來看待，所以我們必須要將這些資料多包一層，並將其設定為 inline-block，並在該 inline-block 物件的外層物件使用 line-height 來替代 height 的設定，如此便可以達成垂直置中的目的囉，縱使你的資料是包含了標題跟內文在內也可以正常的垂直置中喔。

原理

這個例子最基本就是利用line-height針對行物件可置中的特性，將整個裝載多行文字的.content區塊設定為inline-block，使其具備inline的特性好讓它支援line-height屬性以及vertical-align屬性，接著在.box區塊設定line-height取代其height，就能達成跟第一天的例子一樣的效果了，簡單的說 Amos 是將.content區塊當作是一個單行文字來思考，這樣就能做到『單行』的垂直置中了，但這效果的缺點就是父層一定要固定高度。這方式一般來說不常見到有人這樣寫，但是使用在一些小型區塊其實也挺方便的。要注意到這中間有一個小地方要特別注意，就是.content需要設定vertical-align:middle;才能讓內容區塊順利垂直置中喔。

原始碼

HTML

<div class="box box2">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！
  </div>
</div>

CSS

h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  line-height: 200px;
  text-align: center;
}
.box2 .content{
  display: inline-block;
  height: auto;
  line-height:1;
  width: 400px;
  background: #ccc;
  vertical-align: middle;
}

Line搜尋「@csscoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位